<template>
  <div class="view-quick-retouching-con">
    <div class="change-plan mt10" v-if="fixPicList.length > 0">
      <div class="left">
        <div class="top clearfix">
          <div class="fl">
            <span>修图</span>
            <span style="margin-left: 20px">本次修图数量：{{ fixPicList.length }}张</span>
          </div>
          <div class="fr mr10">
            <a-button type="text" @click="downloadZip">下载</a-button>
          </div>
        </div>
        <div class="bottom">
          <a-image-preview-group infinite>
            <a-space wrap>
              <a-image style="margin-bottom: 10px" v-for="item of fixPicList" :src="item" width="80" height="80" />
            </a-space>
          </a-image-preview-group>
        </div>
      </div>
      <div class="right">
        <div class="top">需求描述</div>
        <div class="bottom desc-style">{{ fixPicRemark }}</div>
      </div>
    </div>
    <div class="small-poster mt10" v-if="addSmallPosterAttList.length > 0">
      <div class="left">
        <div class="top clearfix">
          <div class="fl"> A+小海报 </div>
          <div class="fr mr10">
            <!-- <a-button type="text">下载</a-button> -->
          </div>
        </div>
        <div class="bottom">
          <div class="item clearfix" v-for="item of addSmallPosterAttList">
            <div class="fl lh32">{{ item.name }}</div>
            <div class="fr">
              <a-button type="text" @click="download(item)">下载</a-button>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="top">需求描述</div>
        <div class="bottom desc-style">{{ addSmallPosterAttRemark }}</div>
      </div>
    </div>
    <div class="big-poster mt10" v-if="addBigPosterAttList.length > 0">
      <div class="left">
        <div class="top clearfix">
          <div class="fl"> A+大海报 </div>
          <div class="fr mr10">
            <!-- <a-button type="text">下载</a-button> -->
          </div>
        </div>
        <div class="bottom">
          <div class="item clearfix" v-for="item of addBigPosterAttList">
            <div class="fl lh32">{{ item.name }}</div>
            <div class="fr">
              <a-button type="text" @click="download(item)">下载</a-button>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="top">需求描述</div>
        <div class="bottom desc-style">{{ addBigPosterAttRemark }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { defineComponent, ref, onMounted } from 'vue'
  import JSZip from 'jszip'
  import FileSaver from 'file-saver'
  const props = defineProps(['info'])
  let addBigPosterAttList = ref([])
  let addSmallPosterAttList = ref([])
  let fixPicList = ref([])
  let addBigPosterAttRemark = ref('')
  let addSmallPosterAttRemark = ref('')
  let fixPicRemark = ref('')
  const init = () => {
    let obj = props.info?.quickFixPicTask || {}
    fixPicList.value = (obj.fixPicList && obj.fixPicList.map((e: any) => e.url)) || []
    addSmallPosterAttList.value = obj.addSmallPosterAttList || []
    addBigPosterAttList.value = obj.addBigPosterAttList || []
    fixPicRemark.value = obj.fixPicRemark
    addSmallPosterAttRemark.value = obj.addSmallPosterAttRemark
    addBigPosterAttRemark.value = obj.addBigPosterAttRemark
  }

  const download = (item: any) => {
    let a = document.createElement('a')
    a.href = item.url
    a.click()
  }

  const downloadBtn = (fileList: any, blogTitle: string) => {
    var zip: any = new JSZip()
    var promises = []
    let cache = {}
    for (let item of fileList) {
      // item.feilePath为文件链接地址
      // item.fileName为文件名称
      if (item.url) {
        const promise = getImgArrayBuffer(item.url).then((fileData) => {
          // 下载文件, 并存成ArrayBuffer对象(blob)
          let fileName = item.name ? item.name : item.url.split('/')[item.url.split('/').length - 1]
          zip.file(fileName, fileData, { binary: true }) // 逐个添加文件
          cache[item.fileName] = fileData
        })
        promises.push(promise)
      } else {
        // feilePath地址不存在时提示
        alert(`附件${item.fileName}地址错误，下载失败`)
      }
    }
    Promise.all(promises)
      .then(() => {
        zip.generateAsync({ type: 'blob' }).then((content: any) => {
          // 生成二进制流
          FileSaver.saveAs(content, blogTitle) // 利用file-saver保存文件  blogTitle:自定义文件名
        })
      })
      .catch((res) => {
        alert('文件压缩失败')
      })
  }

  const getImgArrayBuffer = (url: string) => {
    return new Promise((resolve, reject) => {
      //通过请求获取文件blob格式
      let xmlhttp = new XMLHttpRequest()
      xmlhttp.open('GET', url, true)
      xmlhttp.responseType = 'blob'
      xmlhttp.onload = function () {
        if (xmlhttp.status == 200) {
          resolve(xmlhttp.response)
        } else {
          reject(xmlhttp.response)
        }
      }
      xmlhttp.send()
    })
  }

  const downloadZip = () => {
    downloadBtn(props.info?.quickFixPicTask?.fixPicList, 'A+')
  }

  onMounted(() => {
    init()
  })
</script>

<style lang="less" scoped>
  .desc-style {
    padding-left: 10px;
  }

  .lh32 {
    line-height: 32px;
  }

  .view-quick-retouching-con {
    .change-plan,
    .small-poster,
    .big-poster {
      display: flex;
      border: 1px solid #d7d7d7;
      font-size: 12px;
      padding: 5px;
      .left {
        width: 50%;
        .top {
          height: 32px;
          line-height: 32px;
          margin-left: 10px;
        }
        .bottom {
          overflow: hidden;
          border-right: 1px solid #d7d7d7;
        }
      }
      .right {
        width: 50%;
        .top {
          height: 32px;
          line-height: 32px;
          margin-left: 10px;
        }
      }
    }
    .small-poster {
      .item {
        width: 100%;
        // height: 30px;
        // line-height: 30px;
        padding: 0 10px;
      }
    }
    .big-poster {
      .item {
        width: 100%;
        // height: 30px;
        // line-height: 30px;
        padding: 0 10px;
      }
    }
  }
</style>
